<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <u-card :border="false" margin="20rpx 0" :show-head="false">
      <view class="user-info">
        <u-avatar size="120" :src="userInfo.avatar"></u-avatar>
        <view class="info-right">
          <u--text :text="userInfo.nickname" size="20" bold></u--text>
          <u--text :text="'手机号：' + userInfo.phone" color="#909399"></u--text>
        </view>
      </view>
    </u-card>
    <!-- 功能列表 -->
    <u-cell-group>
      <u-cell title="修改密码" icon="lock" isLink @click="showPasswordDialog"></u-cell>
      <u-cell title="关联家属" icon="account" isLink @click="showFamilyDialog"></u-cell>
    </u-cell-group>
    <!-- 退出登录按钮 -->
    <u-button type="error" text="退出登录" customStyle="margin-top: 40rpx" @click="handleLogout"></u-button>
    <!-- 修改密码弹窗 -->
    <u-popup :show="showPassword" mode="center" round="16" @close="closePasswordDialog">
      <view class="password-dialog">
        <u--text text="修改密码" size="18" bold class="title"></u--text>
        <u-form :model="form" ref="passwordForm" labelWidth="120">
          <u-form-item label="旧密码" prop="oldPassword">
            <u-input v-model="form.oldPassword" placeholder="请输入旧密码" password></u-input>
          </u-form-item>
          <u-form-item label="新密码" prop="newPassword">
            <u-input v-model="form.newPassword" placeholder="请输入新密码（6-20位）" password></u-input>
          </u-form-item>
          <u-form-item label="确认密码" prop="confirmPassword">
            <u-input v-model="form.confirmPassword" placeholder="请再次输入新密码" password></u-input>
          </u-form-item>
        </u-form>
        <u-button type="primary" text="提交修改" @click="submitPassword"></u-button>
      </view>
    </u-popup>
    <!-- 在修改密码弹窗下方新增家属信息弹窗 -->
    <u-popup :show="showFamily" mode="center" round="16" @close="closeFamilyDialog">
      <view class="family-dialog">
        <u--text text="关联家属信息" size="18" bold class="title"></u--text>
        <scroll-view scroll-y class="family-list">
          <view v-for="(member, index) in familyMembers" :key="index" class="family-item">
            <u--text :text="`姓名：${member.name}`"></u--text>
            <u--text :text="`性别：${member.gender}`" color="#909399"></u--text>
            <u--text :text="`身份证：${member.idCard}`" color="#909399"></u--text>
            <u--text :text="`编号：${member.code}`" color="#909399"></u--text>
            <u-line margin="20rpx 0"></u-line>
          </view>
        </scroll-view>
        <u-button type="primary" text="关闭" customStyle="margin-top:20rpx" @click="closeFamilyDialog"></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { changePassword } from '../personalCenter/personalCenterApi'
export default {
  data() {
    return {
      showFamily: false,
      familyMembers: [
        {
          name: uni.getStorageSync('elderName'),
          gender: uni.getStorageSync('elderGender'),
          idCard: uni.getStorageSync('elderIdCard'),
          code: uni.getStorageSync('elderId')
        }
      ],
      userInfo: {
        nickname: "138****8888", // 初始为手机号
        phone: "13812348888",
        avatar: "/static/imgs/avatar/avatar.jpg"
      },
      showPassword: false,
      // 修改密码
      form: {
        // phone: this.userInfo.phone,
        oldPassword: "",
        newPassword: "",
        confirmPassword: ""
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, max: 20, message: "密码长度6-20位", trigger: "blur" }
        ],
        confirmPassword: [
          {
            validator: (rule, value) => value === this.form.newPassword,
            message: "两次输入密码不一致",
            trigger: "blur"
          }
        ]
      }
    };
  },
  onReady() {
    this.$refs.passwordForm.setRules(this.rules);
    this.userInfo.nickname = uni.getStorageSync('phone');
    this.userInfo.phone = uni.getStorageSync('phone')
  },
  methods: {
    // 显示修改密码弹窗
    showPasswordDialog() {
      this.showPassword = true;
    },
    // 关闭密码弹窗
    closePasswordDialog() {
      this.showPassword = false;
    },
    // 提交密码修改
    async submitPassword() {
      // 把phone字段插入form中
      this.form.phone = uni.getStorageSync("phone");
      // 这里调用修改密码接口
      const res = await changePassword(this.form.phone, this.form.oldPassword, this.form.newPassword, this.form.confirmPassword);
      if (res.data == "修改成功") {
        uni.showToast({
          title: "修改成功",
          icon: "none",
        });
		// 清空表单
        this.$refs.passwordForm.resetFields();
		      this.form = {
		          oldPassword: "",
		          newPassword: "",
		          confirmPassword: ""
		        };
        // 关闭弹窗
        this.closePasswordDialog();
      } else if (res.data == "旧密码错误") {
        uni.showToast({
          title: "旧密码错误",
          icon: "none",
        });
      }
    },
    // 显示家属信息弹窗
    showFamilyDialog() {
      this.showFamily = true;
    },
    // 关闭家属信息弹窗
    closeFamilyDialog() {
      this.showFamily = false;
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: res => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync("phone");
            uni.removeStorageSync("elderId");
            uni.removeStorageSync("elderName");
            uni.reLaunch({
              url: "/pages/login/login"
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;

  .info-right {
    margin-left: 30rpx;

    .u-text {
      line-height: 1.8;
    }
  }
}

.password-dialog {
  padding: 40rpx;
  width: 600rpx;

  .title {
    text-align: center;
    margin-bottom: 40rpx;
  }

  .u-form {
    margin-bottom: 40rpx;
  }
}

.notice-dialog {
  padding: 40rpx;
  width: 600rpx;

  .title {
    text-align: center;
    margin-bottom: 30rpx;
  }

  .notice-content {
    /deep/ .u-text {
      margin: 15rpx 0;
    }
  }

  .family-dialog {
    padding: 40rpx;
    width: 800rpx; // 主要修改点：从650rpx→800rpx
    max-height: 80vh;

    .title {
      text-align: center;
      margin-bottom: 30rpx;
      font-size: 36rpx; // 增加标题字号
    }

    .family-list {
      max-height: 60vh;
      padding: 0 30rpx; // 增加横向内边距

      .family-item {
        padding: 30rpx 0; // 增加纵向间距

        .u-text {
          line-height: 1.8; // 增加行高
          font-size: 32rpx; // 增加内容字号
        }

        // 添加字段标签样式
        :first-child .u-text {
          font-weight: bold;
          color: #303133;
        }
      }
    }

    // 调整关闭按钮宽度
    .u-button {
      width: 60%;
      margin: 40rpx auto 0;
    }
  }
}
</style>